{% load static %}
{% load filters %}
{% load query_modifiers %}

<div class="{% if isTag %}mt-4{% endif %}">
    <div class="d-inline-flex mt-sm-4 mt-2 mt-lg-0">
        <form class="d-flex" role="search">
            <input class="form-control me-2" type="search" placeholder="Поиск" aria-label="Поиск" />
            <div class="dropdown mt-1">
                <a class="dropdown-toggle link-underline link-underline-opacity-0" href="#" role="button"
                    id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="{% static 'img/filter.svg' %}" alt="" width="25rem" height="25rem" />
                </a>
                <ul class="dropdown-menu">
                    <li><a class="dropdown-item" href="{{path|del_orderby:"rating"}}">Сначала новые</a></li>
                    <li><a class="dropdown-item" href="{{path|add_orderby:"rating"}}">Сначала популярные</a></li>
                </ul>
            </div>
            <button class="btn btn-outline-success mx-2" type="submit">
                Поиск
            </button>
        </form>
        <div class="d-none d-sm-block">
            <button type="button" class="btn btn-success ms-1">Задать вопрос</button>
        </div>
    </div>
        <div class="d-block">
            {% for tag in tags %}
                <div class="badge bg-secondary mt-1 d-inline-flex" height="1.5rem">
                    <div style="margin-top: 0.1rem; font-size: 0.9rem;">
                        {{tag}}
                    </div>
                    <div data-bs-theme="dark">
                        <a href="{{path|del_tag:tag}}" type="button" class="btn-close ms-1 dark" aria-label="Close"></a>
                    </div>
                </div>
            {% endfor %}
        </div>
    <div class="d-sm-none mt-1 mb-2">
        <button type="button" class="btn btn-success mb-2">Задать вопрос</button>
    </div>
</div>